<template>
    <div class="bar"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    name: 'MyAppMyRadar',

    data() {
        return {

        };
    },

    mounted() {
        let res = echarts.init(document.querySelector('.bar'))
        let option = {
            // backgroundColor: '#0A2E5D',
            "normal": {
                "top": 200,
                "left": 300,
                "width": 500,
                "height": 400,
                "zIndex": 6,
                "backgroundColor": ""
            },
            "color": ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)"],
            "tooltip": {
                "show": true,
                "trigger": "item"
            },
            "radar": {
                "center": ["50%", "50%"],
                "radius": "50%",
                "startAngle": 90,
                "splitNumber": 4,
                "shape": "circle",
                "splitArea": {
                    "areaStyle": {
                        "color": ["transparent"]
                    }
                },
                "axisLabel": {
                    "show": false,
                    "fontSize": 18,
                    "color": "#fff",
                    "fontStyle": "normal",
                    "fontWeight": "normal"
                },
                "axisLine": {
                    "show": true,
                    "lineStyle": {
                        "color": "white"//
                    }
                },
                "splitLine": {
                    "show": true,
                    "lineStyle": {
                        "color": "white"//
                    }
                },
                "indicator": [{
                    "name": "机场",
                    "max": 90
                }, {
                    "name": "商场",
                    "max": 88
                }, {
                    "name": "火车站",
                    "max": 88
                }, {
                    "name": "汽车站",
                    "max": 88
                }, {
                    "name": "地铁",
                    "max": 88
                },]
            },
            "series": [{
                "name": "渠道分布",
                "type": "radar",
                "symbol": "circle",
                "symbolSize": 10,
                "areaStyle": {
                    "normal": {
                        "color": "rgba(245, 166, 35, 0.4)"
                    }
                },
                itemStyle: {
                    color: 'rgba(245, 166, 35, 1)',
                    borderColor: 'rgba(245, 166, 35, 0.3)',
                    borderWidth: 10,
                },
                "lineStyle": {
                    "normal": {
                        "type": "dashed",

                        "color": "rgba(245, 166, 35, 1)",
                        "width": 2
                    }
                },

            }, {
                "name": "高一(2)班",
                "type": "radar",
                "symbol": "circle",
                "symbolSize": 10,
                "itemStyle": {
                    "normal": {
                        color: 'rgba(19, 173, 255, 1)',
                        "borderColor": "rgba(19, 173, 255, 0.4)",
                        "borderWidth": 10
                    }
                },
                "areaStyle": {
                    "normal": {
                        "color": "rgba(19, 173, 255, 0.5)"
                    }
                },
                "lineStyle": {
                    "normal": {
                        "color": "rgba(19, 173, 255, 1)",
                        "width": 2,
                        "type": "dashed"
                    }
                },
                "data": [
                    [90, 19, 56, 11, 34]
                ]
            }]
        };
        res.setOption(option)
        window.addEventListener('resize', function () {
            res.resize()
        })
    },

    methods: {

    },
};
</script>

<style lang="scss" scoped>

</style>